<template>
  <div class="wrapper" ref="wrapper" v-show="isShow">
    <div>
      <div>
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">西安</div>
          </div>
        </div>
      </div>
      <div>
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="city of hotCities" :key="city.id">
            <div class="button">{{city.name}}</div>
          </div>
        </div>
      </div>
      <div v-for="(list, letter) of cities" :key="letter">
        <div class="title border-topbottom" :ref="letter">{{letter}}</div>
          <div class="row-button border-bottom" v-for="city of list" :key="city.id">
            {{city.name}}
          </div>
      </div>
    </div>
    <city-alphabet :letters="letters" @letterChange="letterChangeHandler"/>
   </div>
</template>

<script>
import BScroll from 'better-scroll'
import CityAlphabet from './Alphabet'
export default {
  name: 'CityList',
  props: {
    cityData: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {probeType: 3})
    })
  },
  computed: {
    hotCities () {
      let hotCities = []
      if (this.cityData.hotCities && this.cityData.hotCities instanceof Array) {
        hotCities = this.cityData.hotCities
      }
      return hotCities
    },
    cities () {
      let cities = {}
      if (this.cityData.cities && this.cityData.cities instanceof Object) {
        cities = this.cityData.cities
      }
      return cities
    },
    letters () {
      let letters = []
      if (this.cityData.cities && this.cityData.cities instanceof Object) {
        for (let letter in this.cityData.cities) {
          letters.push(letter)
        }
      }
      return letters
    }
  },
  methods: {
    letterChangeHandler (letter) {
      this.scroll.scrollToElement(this.$refs[letter][0])
    }
  },
  components: {
    CityAlphabet
  }
}
</script>

<style lang="stylus" scoped>
.border-topbottom
  &:before
    border-color: #ccc
  &:after
    border-color: #ccc
.border-bottom
  &:before
    border-color: #ccc
.wrapper
  position: fixed
  overflow: hidden
  top: 1.68rem
  left: 0
  right: 0
  bottom: 0
  .title
    height: .54rem
    line-height: .54rem
    color: #666
    padding-left: .2rem
    font-size: .26rem
    background: #eee
  .button-list
    padding: .1rem .6rem .1rem .1rem
    .button-wrapper
      width:33.33%
      display: inline-block
    .button
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
      text-align: center
      padding: .1rem
      margin: .1rem
      border: .02rem solid #ccc
      border-radius: .06rem
  .row-button
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
    line-height: .76rem
    height: .76rem
    padding-left: .2rem
</style>
